<{include file="www/header.tpl"}>
<div class="homepage-line">
<div class="line-prev"></div>
<div class="line-next"></div>
<div class=homepage-line-box>
<div class="homepage-line-wrap">
<ul class="line-list fix">
<{foreach from=$newlinelist item=v}>
 <li class="li">
 <a class="a" target="_blank" href="/<{$v.type}>/detail/<{$v.id}>">
<div class="line-wrap">
                  
<div class="line-top">
  <div class="line-thumb-shadow"></div>
  <img class="line-thumb" src="<{$v.thumb}>">
  <em class="line-name"><{$v.name}></em>
  <em class="line-city"><{$v.city}></em>
  <em class="line-price">
    <{$v.priceTotal/100|round:2}>€
  </em>
</div>
                  
<div class="line-bottom fix">
  <div class="line-bottom-left">
    <img class="guide-tx" src="<{$v.guider.userIcon}>">
    <em class="guide-name"><{$v.guider.realName}></em>
  </div> 
  <div class="line-bottom-right">
    <{$v.summary}>
  </div>
</div>
                  
</div>
</a>
</li>
<{/foreach}>
</ul>
</div>
</div>
</div>
<style>
.homepage-line{position: relative;width: 1000px;height: 312px;margin: 0 auto;}
.homepage-line .line-prev{cursor:pointer;position: absolute;top: 95px;left:-25px;width: 50px; height: 50px;border: 1px solid #ccc;border-radius: 25px;background: #fff;box-shadow: 0 0 0 4px rgba(0,0,0,.1); z-index: 10;}
.homepage-line .line-next{cursor:pointer;position: absolute;top: 95px;right:-25px;width: 50px; height: 50px;border: 1px solid #ccc;border-radius: 25px;background: #fff;box-shadow: 0 0 0 4px rgba(0,0,0,.1); z-index: 10;};
.homepage-line-box{width: 1000px;height:312px;overflow: hidden;}
.homepage-line-wrap{width:3450px;position:relative;left:0;top:0;}
.line-list{padding:0;margin:0;}
.line-list a {text-decoration:none; color:#000;}
.line-list .li{float: left;width: 310px;margin-right: 35px;border: 1px solid #E2E2E2}
.line-list .line-top{position:relative;}
.line-list .line-top .line-thumb-shadow{display:none;position:absolute;top:0;left:0;width: 310px;height: 245px;background:#000;opacity:0.5;}
.line-list .line-top .line-thumb{width: 310px;height: 245px;}
.line-list .line-top .line-name{position: absolute;top: 90px;left: 75px;color: #fff;width: 160px;font-size: 18px;line-height: 22px;display:none;text-align:center;}
.line-list .line-top .line-city{position: absolute;top: 10px;right: 10px;color: #fff;display:none;}
.line-list .line-top .line-price{width: 60px;height:30px;text-align:center;font-size: 18px;line-height: 30px;position: absolute;top: 170px;left: 0;color: #fff;background: #333;} 
.line-list .line-bottom{width: 310px;height: 65px;}
.line-list .line-bottom-left{float: left;width: 54px;height: 65px;margin-left: 10px;}
.line-list .line-bottom-left .guide-tx{width: 50px;border: 2px solid #fff;border-radius: 25px;position: relative;top: -25px;}
.line-list .line-bottom-left .guide-name{position: relative;top: -20px;color: #000;width: 54px;text-align: center;font-size: 12px;display: block;word-break: break-word;}
.line-list .line-bottom-right{float: left;width: 226px;font-size: 12px;line-height: 18px; overflow: hidden;height: 35px;margin: 10px 10px 20px 10px; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical}
</style>
<script type="text/javascript">
$('.line-wrap').mouseenter(function(){
	$(this).find('.line-thumb-shadow').show();
	$(this).find('.line-name').show();
	$(this).find('.line-city').show();
});
$('.line-wrap').mouseleave(function(){
	$(this).find('.line-thumb-shadow').hide();
	$(this).find('.line-name').hide();
	$(this).find('.line-city').hide();
});
$('.homepage-line .line-next').click(function(){
	var posleft=parseInt($('.homepage-line-wrap').css('left'));
	if(posleft>-2400){
		posleft-=345;
		posleft+='px';
	}else{posleft=0;}
        $('.homepage-line-wrap').animate({left:posleft},'normal','linear');
});
$('.homepage-line .line-prev').click(function(){
        var posleft=parseInt($('.homepage-line-wrap').css('left'));
        if(posleft<-300){
                posleft+=345;
                posleft+='px';
        $('.homepage-line-wrap').animate({left:posleft},'normal','linear');
        }        
});
</script>
